<template>
  <div class="w-full min-h-full flex justify-center items-center">
    <div class="w-full lg:w-4/5 flex flex-col justify-center items-center">
      <CompHeader class="hidden lg:block"></CompHeader>
      <CompHeaderMobile class="lg:hidden"></CompHeaderMobile>

      <Nuxt class="my-16" />

      <CompFooter class="hidden lg:block"></CompFooter>
      <CompFooterMobile class="lg:hidden mt-8"></CompFooterMobile>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CompHeader from '~/components/layout-comp/CompHeader'
import CompFooter from '~/components/layout-comp/CompFooter'
import CompFooterMobile from '~/components/layout-comp/CompFooterMobile'
import CompHeaderMobile from '~/components/layout-comp/CompHeaderMobile'

export default {
  name: 'NcBlogLayout',
  components: { CompHeaderMobile, CompFooterMobile, CompFooter, CompHeader },
  computed: {
    ...mapGetters(['settings']),
  },
  head() {
    const i18nSeo = this.$nuxtI18nSeo()

    return {
      titleTemplate: (chunk) => {
        if (chunk) {
          return `${chunk} - ${this.settings.title}`
        }

        return this.settings.title
      },
      bodyAttrs: {
        class: [
          'h-screen lg:h-auto overflow-y-auto',
          'antialiased text-gray-700 leading-normal bg-white dark:bg-gray-900 dark:text-gray-300',
        ],
      },
      ...i18nSeo,
      meta: (i18nSeo.meta || []).concat([
        // Open Graph
        {
          hid: 'og:site_name',
          property: 'og:site_name',
          content: this.settings.title,
        },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:url', property: 'og:url', content: this.settings.url },
        {
          hid: 'og:image',
          property: 'og:image',
          content: `${this.settings.url}/preview.png`,
        },
        // Twitter Card
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary_large_image',
        },
        {
          hid: 'twitter:site',
          name: 'twitter:site',
          content: this.settings.twitter,
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: this.settings.title,
        },
        {
          hid: 'twitter:image',
          name: 'twitter:image',
          content: `${this.settings.url}/preview.png`,
        },
        {
          hid: 'twitter:image:alt',
          name: 'twitter:image:alt',
          content: this.settings.title,
        },
      ]),
    }
  },
}
</script>
